<template>
  <ContentWrap :body-style="{ padding: '5px' }" class="border-none! cartAcitivtyBg">
    <el-row :gutter="10" class="m-x-0! c-white mb-5px">
      <el-col :span="12">
        <div> 活动名称: {{ activeInfo.activityName }} </div>
      </el-col>
      <el-col :span="12">
        <div class="flex justify-end">
          活动时间: {{ formatDate(activeInfo.activityStartTime, 'YYYY-MM-DD') }} -
          {{ formatDate(activeInfo.activityEndTime, 'YYYY-MM-DD') }}
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="bg-[var(--el-bg-color)] m-x-0! p-y-5px">
      <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="3">
        <div class="flex justify-center">
          <el-image :fit="'fill'" :src="spuItem.picUrl || defaultProductImg" />
        </div>
      </el-col>
      <el-col :xs="17" :sm="17" :md="17" :lg="16" :xl="17">
        <div class="flex flex-col justify-between h-full p-y-5px">
          <div class="flex items-center">
            <el-text line-clamp="1" class="custom-text-18 c-[#11192d]! .dark:c-[#fff]!">
              <!-- 是否赠送：sales（true|false）  -->
              <el-tag class="p-2px! !h-full !m-r-2px">活动</el-tag>
              {{ spuItem.brandId }} {{ spuItem.spuName || spuItem.titleName }}
            </el-text>
          </div>

          <div class="custom-text-16 flex items-center">
            <!-- <el-text class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
              ID: {{ spuItem.skuId }}</el-text
            > -->
            零售单价:
            <el-text class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!" tag="del">
              {{ fenToYuan(spuItem.price) }}元</el-text
            >

            <el-divider direction="vertical" />
            <el-tag
              type="primary"
              class="custom-text-16"
              v-for="property in spuItem.properties"
              :key="property.propertyId"
            >
              {{ property.valueName }}
            </el-tag>
          </div>

          <div class="flex items-center">
            <slot name="extInfo"></slot>
          </div>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="flex !h-full justify-end">
          <slot name="itemButton"></slot>
        </div>
      </el-col>
    </el-row>
    <el-divider border-style="dashed" class="m-y-0!" />

    <el-row
      :gutter="10"
      class="bg-[var(--el-bg-color)] m-x-0! p-y-5px"
      v-for="(item, index) in activeInfo.generalProductDTOList"
      :key="index"
    >
      <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="3">
        <div class="flex justify-center">
          <el-image :fit="'fill'" :src="item.picUrl || defaultProductImg" />
        </div>
      </el-col>
      <el-col :xs="17" :sm="17" :md="17" :lg="16" :xl="17">
        <div class="flex flex-col justify-between h-full p-y-5px">
          <div class="flex items-center">
            <el-text line-clamp="1" class="custom-text-18 c-[#11192d]! .dark:c-[#fff]!">
              <!-- 是否赠送：sales（true|false）  -->
              <el-tag class="p-2px! !h-full !m-r-2px">活动商品</el-tag>
              {{ item.brandId }} {{ item.spuName || item.titleName }}
            </el-text>
          </div>

          <div class="custom-text-16 flex items-center">
            <!-- 零售单价:
            <el-text class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!" tag="del">
              {{ fenToYuan(spuItem.price) }}元</el-text
            > -->
            <!-- <el-divider direction="vertical" /> -->
            <el-tag
              type="primary"
              class="custom-text-16"
              v-for="property in item.properties"
              :key="property.propertyId"
            >
              {{ property.valueName }}
            </el-tag>
          </div>
          <div class="flex items-center"> &nbsp; </div>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="flex !h-full justify-end">
          <div class="h-full! flex flex-col justify-between p-y-5px">
            <div class="!w-full flex justify-end">
              <!-- <el-button link type="danger">
                <Icon icon="ep:delete" :size="24" />
              </el-button> -->
              &nbsp;
            </div>
            <el-input-number
              class="meton-input-number w-100%!"
              disabled
              v-model="item.activityProductCount"
              @click.stop="() => {}"
              :min="1"
            />

            <div> &nbsp; </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="spuItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'

import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图
import * as ProductSpuApi from '@/api/shop/product/spu'

const props = defineProps({
  // 选中的门店列表
  spuItem: propTypes.object.def({}),
  isSales: propTypes.bool.def(false) //是否赠送
})
// getter
const loading = ref(false)
const hasRun = ref(false) // 标志位，用于控制监听器是否已执行
const activeInfo = reactive({
  activityName: '',
  activityStartTime: '',
  activityEndTime: '',
  generalProductDTOList: [] as any
})

const getSkuDetails = async (skuId: any) => {
  loading.value = true
  try {
    const data = await ProductSpuApi.getSkuActivity({ activityId: skuId } as any)
    activeInfo.activityName = data.activityName
    activeInfo.activityStartTime = data.activityStartTime
    activeInfo.activityEndTime = data.activityEndTime
    activeInfo.generalProductDTOList = data.generalProductDTOList
  } finally {
    loading.value = false
  }
}
watch(
  () => props.spuItem,
  async (data) => {
    if (!data) return
    if (!hasRun.value) {
      await getSkuDetails(data.skuId)
      hasRun.value = true
    }
  },
  { immediate: true }
)
onMounted(() => {})
</script>
<style lang="scss" scoped>
:deep(.el-image) {
  border-radius: 4px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
.cartAcitivtyBg {
  background-image: linear-gradient(to right, red 20%, orange 90%);
  transition: background-image 0.5s; /* 平滑过渡效果 */
}
</style>
